<template>
    <div class="echarts" :id="id"></div>
</template>

<script>
import * as echarts from 'echarts';
import register from '@/js/main/register.js';
export default {
    props: {
        element: {
            type: Object
        },
        id: {
            type: String
        }
    },
    data() {
        return {
            myChart: null,
            timer: null
        };
    },
    created() {
        register.addComponent(this);
    },
    mounted() {
        this.myChart = echarts.init(document.getElementById(this.id));
        this.createClock();
    },
    methods: {
        redraw() {
            this.myChart.resize({
                width: this.element.style.width.pixel - this.element.style.borderWidth * 2 + 'px',
                height: this.element.style.height.pixel - this.element.style.borderWidth * 2 + 'px',
                animation: { duration: 0 }
            });
            this.myChart.setOption(this.element.attribute.chartOption.option);
        },
        createClock() {
            if (this.timer) {
                window.clearInterval(this.timer);
            }
            this.timer = window.setInterval(() => {
                var date = new Date();
                var second = date.getSeconds();
                var minute = date.getMinutes() + second / 60;
                var hour = (date.getHours() % 12) + minute / 60;

                this.element.attribute.chartOption.option.animationDurationUpdate = 300;
                this.myChart.setOption({
                    series: [
                        {
                            name: 'hour',
                            animation: hour !== 0,
                            data: [{ value: hour }]
                        },
                        {
                            name: 'minute',
                            animation: minute !== 0,
                            data: [{ value: minute }]
                        },
                        {
                            animation: second !== 0,
                            name: 'second',
                            data: [{ value: second }]
                        }
                    ]
                });
            }, 1000);
            this.element.attribute.chartOption.option.series[0].axisLabel.formatter = function(value) {
                if (value === 0) {
                    return '';
                }
                return value;
            };
            this.myChart.setOption(this.element.attribute.chartOption.option);
        }
    },
    destroyed() {
        register.removeComponent(this);
        if (this.timer) {
            window.clearInterval(this.timer);
        }
    }
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
    display: none;
}
</style>